<template>
  <div id="FormDialog">
    <PeopleSelect
      ref="peopleSelect"
      :type="'multiple'"
      :isCheck="true"
      :open="peopleOpen"
      @cancel="peopleOpen = false"
      @submit="submitPeople"
    ></PeopleSelect>
    <DepartmentDialog
      ref="peopleSelect"
      :type="'multiple'"
      :isCheck="true"
      :open="peopleOpen1"
      @cancel="peopleOpen1 = false"
      @submit="submitPeople1"
    ></DepartmentDialog>
    <el-row>
      <el-col :span="24" class="margin_col">
        <div class="always_handerOne">
          <div class="always_hander"></div>
          <div class="always_title">
            {{ title ? `${title}` : "以往查评" }}
          </div>
        </div>
      </el-col>
      <el-col :span="24" class="margin_col">
        <div class="always_handerOne1">
          <el-collapse v-model="activeNames">
            <el-collapse-item name="0">
              <template slot="title">
                <div class="always_title1">
                  <div></div>
                  基本信息
                </div>
              </template>
              <el-form
                :model="formData"
                ref="vForm"
                :rules="rules"
                label-position="center"
                label-width="120px"
                :size="medium"
                style="display: flex; justify-content: flex-start;"
              >
                <el-form-item label="要素" prop="evaluationElements">
                  <el-input
                    v-model="formData.evaluationElements"
                    :disabled="true"
                    type="text"
                    clearable
                    :size="medium"
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
                <el-form-item label="评审人" prop="examiner">
                  <el-input
                    v-model="formData.examiner"
                    :disabled="true"
                    type="text"
                    clearable
                    :size="medium"
                    placeholder="请输入评审人"
                  ></el-input>
                </el-form-item>
                <el-form-item label="受评单位" prop="evaluateObject" >
                  <el-select
                    :disabled="true"
                    v-model="formData.evaluateObject"
                    class="full-width-input"
                    clearable
                    :size="medium"
                  >
                    <el-option
                      v-for="option in deptsOptions"
                      :key="option.value"
                      :label="option.label"
                      :value="option.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="标准分" prop="standardScore">
                  <el-input
                    v-model="formData.standardScore"
                    :disabled="true"
                    type="text"
                    clearable
                    :size="medium"
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="评审事件"
                  prop="reviewEvents"
                  class="required"
                >
                  <el-input
                    v-model="formData.reviewEvents"
                    :disabled="true"
                    type="text"
                    clearable
                    :size="medium"
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="reviewStatus">
                  <el-input
                    v-model="formData.reviewStatus"
                    type="text"
                    clearable
                    :size="medium"
                    :disabled="true"
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
                <div>
                </div>
                <el-container style="width: 90%">
                  <el-container>
                    <el-header class="el-header">
                      <el-form-item
                        label="是否适用"
                        prop="isApply"
                      >
                        <el-radio-group v-model="formData.isApply" :disabled="isRadioGroupDisabled" class="el-radio-group">
                          <el-radio label="0" class="styleCentre"
                          >适用</el-radio
                          >
                          <!--                          <el-radio label="1" class="styleCentre"-->
                          <!--                          >部分适用</el-radio-->
                          <!--                          >-->
                          <el-radio label="2" class="styleCentre"
                          >不适用</el-radio
                          >
                          <el-radio label="3" class="styleCentre"
                          >不参与</el-radio
                          >
                        </el-radio-group>
                      </el-form-item>
                    </el-header>
                    <el-aside width="70%" class="style-Change">
                      <el-form-item label="支撑材料" prop="backingMaterial" class="required">
                        <div>
                          <el-upload
                            multiple
                            v-model="formData.backingMaterial"
                            :action="uploadFileUrl"
                            :before-upload="handleBeforeUpload"
                            :file-list="fileList"
                            :limit="3"
                            :on-error="handleUploadError"
                            :on-preview="handlePictureCardPreview"
                            :on-exceed="handleExceed"
                            :on-success="handleUploadSuccess"
                            :show-file-list="true"
                            :headers="headers"
                            class="upload-file-uploader"
                            ref="fileUpload"
                            list-type="picture-card"
                            :auto-upload="true"
                            :hidden="isBackingMaterial"
                          >
                            <i slot="default" class="el-icon-plus" v-if="fileHidden"></i>
                            <div slot="file" slot-scope="{file}" style="width: 400%">
                              <img
                                class="el-upload-list__item-thumbnail"
                                :src="file.url" alt=""
                              >
                              <span class="el-upload-list__item-actions">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                          >
                          <i class="el-icon-zoom-in"></i>
                          </span>
                          <span
                            v-if="true"
                            class="el-upload-list__item-delete"
                            @click="handleDownload(file)"
                          >
                           <i class="el-icon-download"></i>
                            </span>
                        <span
                          v-if="true"
                          class="el-upload-list__item-delete"
                          @click="removeFile(index,file)"
                        >
                          <i class="el-icon-delete"></i>
                        </span>
                      </span>
                            </div>
                          </el-upload>
                          <el-dialog :visible.sync="dialogVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                          </el-dialog>
                        </div>
                        <div v-if="!fileShow">
                          <div v-for="(file, index) in newfileList" :key="index">
                            <el-link target="_blank" @click="fileDownload(file)">  <a>{{ file.oldFileName }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a> </el-link>
                          </div>
                        </div>
                      </el-form-item>
                    </el-aside>
                    <el-main class="el-header">
                      <el-form-item label="是否存在问题" prop="isProblem">
                        <el-radio-group v-model="formData.isProblem" @change="isProblemChange(formData.isProblem)"
                                        :disabled="isIsProblem" class="el-radio-group">
                          <el-radio label="1" value="1" class="styleCentre">是</el-radio>
                          <el-radio label="0" value="0" class="styleCentre">否</el-radio>
                        </el-radio-group>
                      </el-form-item>
                    </el-main>
                  </el-container>
                </el-container>
                <el-form-item label="扣分" prop="deduct" v-if="gist" style="width: 43.3%">
                  <div class="block"  >
                    <el-slider
                      show-input
                      :disabled="isDeduct"
                      v-model="formData.deduct"
                      @change="cliekDen(formData.deduct)"
                      :min="0" :max="bigPrice"
                    >
                    </el-slider>
                  </div>
                </el-form-item>
                <el-form-item></el-form-item>
                <el-form-item label="实得分" v-if="gist" prop="actualScore">
                  <el-input
                    v-model="actualScore"
                    :disabled="true"
                    type="text"
                    clearable
                    :size="medium"
                    placeholder="请输入内容"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="查证情况"
                  prop="lookPapersCase"
                  class="sel-width"
                >
                  <el-input
                    :disabled="isLookPapersCase"
                    type="textarea"
                    :rows="4"
                    placeholder="请输入内容"
                    v-model="formData.lookPapersCase"
                    ref="lookPapersInput"
                  >
                  </el-input>
<!--                  <el-button @click="copyText">复制文本</el-button>-->
                </el-form-item>
                <el-form-item
                  label="存在问题"
                  prop="problem"
                  class="sel-width"
                  v-if="gist"
                >
                  <el-input
                    :disabled="isPro"
                    type="textarea"
                    :rows="4"
                    placeholder="请输入内容"
                    v-model="formData.problem"
                    ref="lookPapersInput"
                  >
                  </el-input>
<!--                  <el-button @click="copyText">复制文本</el-button>-->
                </el-form-item>
                <el-form-item
                  label="整改建议"
                  prop="rectifySuggest"
                  class="sel-width"
                  v-if="gist"
                >
                  <el-input
                    :disabled="isRectifySuggest"
                    type="textarea"
                    :rows="4"
                    placeholder="请输入内容"
                    v-model="formData.rectifySuggest"
                    ref="lookPapersInput"
                  >
                  </el-input>
<!--                  <el-button @click="copyText">复制文本</el-button>-->
                </el-form-item>
                <el-form-item
                  label="扣分依据"
                  prop="deductPursuant"
                  class="sel-width"
                  v-if="gist"
                >
                  <el-input
                    :disabled="isDeductPursuant"
                    type="textarea"
                    :rows="4"
                    placeholder="请输入内容"
                    v-model="formData.deductPursuant"
                    ref="lookPapersInput"
                  >
                  </el-input>
<!--                  <el-button @click="copyText">复制文本</el-button>-->
                </el-form-item>

                <el-form-item
                  label="评审标准"
                  prop="scoreStandard"
                  class="sel-width"
                >
                  <el-input
                    type="textarea"
                    :disabled="true"
                    :rows="4"
                    placeholder="请输入内容"
                    v-model="formData.scoreStandard"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item
                  label="评分标准"
                  prop="handleQuery"
                  class="sel-width"
                >
                  <el-input
                    type="textarea"
                    :disabled="true"
                    :rows="4"
                    placeholder="请输入内容"
                    v-model="formData.handleQuery"
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="现场照片" prop="scenePhoto">
                  <div class="imageList">
                    <div class="block" v-for="fit in imgurl" :key="fit">
                      <el-image
                        style="width: 100px; height: 100px; margin-left: 15px;"
                        :src="fit"
                        :fit="fit">
                      </el-image>
                    </div>
                  </div>
                </el-form-item>
              </el-form>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-col>
      <el-col :span="24" class="margin_col" name="1">
        <div class="always_handerOne1">
          <custom-buttons
            @back="handleBack"
            @confirm="handleConfirm"
            :handleShow="handleShow"
          ></custom-buttons>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  listGroping,
  getGroping,
  delGroping,
  addGroping,
  updateGroping,
  listGropingByProject,
  getListSon,
  updateGropingById
} from '@/api/system/review/groping';
import {
  isSafeEva
} from '@/api/system/review/evaluation';
import {
  getFilePath,
  delFileInfo, download
} from '@/api/system/sysFileInfo/fileInfo'
import CustomButtons from "@/components/CustomButton/CustomButton.vue";
import PeopleSelect from "../../../components/Selection/index.vue";
import DepartmentDialog from "../../../components/DepartmentDialog/index.vue";
import { getToken } from '@/utils/auth'
import { delOss } from '@/api/system/oss'
import {queryDept} from "@/api/system/review/event";
export default {
  components: {
    CustomButtons,
    PeopleSelect,
    DepartmentDialog,
  },
  props: {
    // 值
    value: [String, Object, Array],
    // 数量限制
    limit: {
      type: Number,
      default: 5,
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 5,
    },
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileType: {
      type: Array,
      default: () => ["doc", "xls", "ppt", "txt", "pdf","docx"],
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      number: 0,
      uploadList: [],
      bigPrice: 0,
      dialogImageUrl: '', // 上传文件服务器地址
      dialogVisible: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/system/fileInfo/upload", // 上传文件服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      imgurl: [],
      newfileList:[],
      fileShow:true,
      actualScore: 0,
      fileList: [],
      medium: "medium",
      activeNames: ["0", "1", "2"],
      tableData: [],
      selectedRows: [],
      deptsOptions: [],
      gist:false,
      handleShow:true,
      formData: {
        id: undefined,
        refId: undefined,
        reviewEvents: undefined,
        groupName: undefined,
        groupLeader: undefined,
        groupLeaderCode: undefined,
        member: undefined,
        memberCode: undefined,
        creationDate: undefined,
        isDelete: undefined,
        taskAllocation: undefined,
        evaluationElements: undefined,
        standardScore: undefined,
        reviewStatus: undefined,
        reviewEventsId: undefined,
        evaluationElementsId: undefined,
        picture: undefined,
        examinerCode: undefined,
        examiner: undefined,
        isApply: undefined,
        lookWorkCase: undefined,
        evaluateCase: undefined,
        isInnovate: undefined,
        evaluateObject: undefined,
        backingMaterial: "",
        lookPapersCase: undefined,
        deduct: undefined,
        isProblem: undefined,
        problem: undefined,
        isGreatProblem: undefined,
        rectifySuggest: undefined,
        scenePhoto: undefined,
        reviewStandard: undefined,
        scoreStandard: undefined,
        deptCode: undefined,
        deptName: undefined,
        responsibleCode: undefined,
        responsibleName: undefined,
        requireOkTime: undefined,
        okTime: undefined,
        requireSituation: undefined,
        okPhoto: undefined,
        deductPursuant: undefined,
        handleQuery:undefined
        // rectifySuggestHidden: false,
      },
      isBackingMaterial :false,
      isRadioGroupDisabled : false,
      isEvaluateObject :false,
      isIsProblem :false,
      isIsGreatProblem :false,
      isDeduct :false,
      isLookPapersCase :false,
      isDeductPursuant :false,
      isPro :false,
      isRectifySuggest :false,
      fileHidden:true,
      title: "",
      rules: {
        examiner: [{ required: true, message: "检查人不能为空", trigger: "change" }],
        isApply: [{ required: true, message: "是否适用不能为空", trigger: "change" }],
        evaluateObject: [{ required: true, message: "查评对象不能为空", trigger: "change" }],
        isProblem: [{ required: true, message: "是否存在问题不能为空", trigger: "change" }],
        isGreatProblem: [{ required: true, message: "是否重大问题不能为空", trigger: "change" }],
        deduct: [{ required: true, message: "扣分不能为空", trigger: "change" }],
        lookPapersCase: [{ required: true, message: "查证情况不能为空", trigger: "change" }],
        deductPursuant: [{ required: true, message: "扣分依据不能为空", trigger: "change" }],
        problem: [{ required: true, message: "存在问题不能为空", trigger: "change" }],
        rectifySuggest: [{ required: true, message: "整改建议不能为空", trigger: "change" }],
      },
      peopleOpen: false,
      peopleOpen1: false,
      FILEFileList: [],
      FILEUploadHeaders: {},
      FILEUploadData: {},
      listQueryParams: {},
      filterText:""
    };
  },
  computed: {
    // 是否显示提示
    showTip() {
      return this.isShowTip && (this.fileType || this.fileSize);
    },
  },
  watch: {
    "newfileList":{
      handler(newVal, oldVal) {
        if(newVal.length > 0){
          this.fileShow = false
        }else{
          this.fileShow = true
        }
      },
    }
  },
  created() {
    this.getTitle();
    this.handleRrdio();
    // this.queryDept();
    this.formData.backingMaterial = '';
    this.listQueryParams = this.$route.query.queryParams;
    this.filterText = this.$route.query.filterText;
    console.log(this.filterText);
  },
  mounted() {},
  methods: {
    copyText(){
      this.$nextTick(() => {
        // debugger
        const inputElement = this.$refs.lookPapersInput.$refs.textarea;
        const inputValue = inputElement.value;
        if (inputValue) {
          this.copyToClipboard(inputValue);
          this.$message.success("已复制到剪贴板");
        }
      });
    },
    copyToClipboard(text) {
      const el = document.createElement("textarea");
      el.value = text;
      el.style.position = "absolute";
      el.style.left = "-9999px";
      document.body.appendChild(el);
      el.select();
      document.execCommand("copy");
      document.body.removeChild(el);
    },
    getFile(id){
      //调用后台接口,根据当前id查询所有的文件路径
      getFilePath(id).then(response => {
        this.newfileList = response.data
        let data = new Blob([response], { type: 'application/msword,charset=utf-8' });
        let fr = new FileReader();
        fr.readAsArrayBuffer(data);
        fr.addEventListener("loadend",(e) => {
          let buffer = e.target.result;
          this.docxRender(buffer);
        },false);
      }).finally(() => {
      });
    },
    handleRrdio(){
      if(this.formData.isProblem == 1){
        this.gist = true;
      }else if(this.formData.isProblem == null){
        this.gist = false;
      }else{
        this.gist = false;
      }
    },
    cliekDen(row){
      this.actualScore = this.formData.standardScore;
      if ( this.actualScore ==0 || isNaN(this.actualScore) || this.actualScore == undefined){
        return this.actualScore =0;
      }
      if (row < this.formData.standardScore * 0.25){

      }else if (row > this.formData.standardScore * 0.75){

      }else {

      }
      this.actualScore = parseFloat(this.actualScore) - row;
    },
    getTitle() {
      const {
        row,
        record,
        evalution
      } = this.$route.query;
      row.deduct = parseInt(row.deduct);

      this.formData = row;
      // debugger;
      // if (this.formData.reviewEventsId != null && this.formData.reviewEventsId != ''){
      //   let data = {
      //     id: this.formData.reviewEventsId
      //   };
      //   console.log(data)
      //   EventById(data).then((row) =>{
      //     console.log(row)
      //   })
      // }
      //
      if (this.formData.standardScore != undefined || this.formData.standardScore != ''){
        this.bigPrice = this.formData.standardScore;
      }

      // if (!isNaN(this.formData.deduct) && this.formData.deduct !=0){
      //   this.actualScore = parseFloat(this.formData.standardScore) - this.formData.deduct;
      // }else {
      this.actualScore = this.formData.standardScore;
      // }
      if (undefined != row.id){
        this.getFile(row.id);
      }
      if (undefined == row.isProblem){
        this.formData.examiner = this.$store.state.user.nikename;
      }
      if (record == 1 || evalution == 1){
        this.handleShow = false;
        this.isBackingMaterial = true;
        this.isRadioGroupDisabled = true;
        this.isEvaluateObject = true;
        this.isIsProblem = true;
        this.isIsGreatProblem = true;
        this.isDeduct = true;
        this.isLookPapersCase = true;
        this.isDeductPursuant = true;
        this.isPro = true;
        this.isRectifySuggest = true;
        this.fileHidden = false;
        this.isShowTip = false;
      }
      //调用后台看一下查评事件的类型是不是安评
      this.isSafeEva(row.id);
    },
    downloadLook(file){
      let row = {};
      row.id = file.fileId;
      row.oldFileName = file.name;
      console.log(row)
      this.fileDownload(row);
    },
    /** 文件下载操作 */
    fileDownload(row) {
      console.log(row)
      this.$modal.loading("下载中")
      download(row.id).then((rew) =>{
        console.log(rew)
        this.$modal.closeLoading();
        // 创建临时的下载链接
        const url = window.URL.createObjectURL(rew);
        if (typeof window.chrome !== 'undefined') {
          // chrome
          const link = document.createElement('a');
          link.href = url;
          //  row.oldFileName  文件名字
          link.download = row.oldFileName;
          link.click();
          // window.open(rew)
          window.URL.revokeObjectURL(link.href); // 释放资源
        } else if (typeof window.navigator.msSaveBlob !== 'undefined') {
          // IE
          window.navigator.msSaveBlob(rew, row.oldFileName);
        } else {
          // Firefox
          const file = new File([rew], row.oldFileName,{ type: 'application/octet-stream' });
          window.open(URL.createObjectURL(file));
        }

      }).finally(() =>{

      })

    },
    handleBack() {
      // debugger
      if (this.listQueryParams.params != undefined){
        // 传递数据
        this.$router.push({
          path: "/review/localEvaluation/evalutionRecord",
          query: {
            queryParams: this.listQueryParams,
            time: this.listQueryParams.params,
            filterText:this.filterText,
            page:1
          },
        });
      }else {
        // 传递数据
        this.$router.push({
          path: "/review/localEvaluation/evalutionRecord",
          query: {
            queryParams: this.listQueryParams,
            time: undefined,
            filterText:this.filterText,
            page:1
          },
        });
      }
      // window.history.back();
      // 执行返回逻辑
    },
    open() {
      this.peopleOpen = true;
    },
    open2() {
      this.peopleOpen1 = true;
    },
    submitPeople1(peopleList) {
      if (peopleList.length != 1) {
        return this.$message.warning("请选择一个岗位e");
      }
      this.formData.responsiblePost = peopleList[0].label;
      this.peopleOpen1 = false;
    },
    submitPeople(peopleList) {
      if (peopleList.length != 1) {
        return this.$message.warning("请选择一位人员");
      }
      this.formData.examiner = peopleList[0].userName;
      this.peopleOpen = false;
    },
    //保存
    handleConfirm() {
      this.$refs["vForm"].validate((valid) => {
        if (valid) {
          this.$modal.loading("保存中");
          if (this.formData.id !== undefined) {
            updateGropingById(this.formData)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                if (this.listQueryParams.params.endTime != undefined){
                  // 传递数据
                  this.$router.push({
                    path: "/review/localEvaluation/evalutionRecord",
                    query: {
                      queryParams: this.listQueryParams,
                      time: this.listQueryParams.params
                    },
                  });
                }else {
                  // 传递数据
                  this.$router.push({
                    path: "/review/localEvaluation/evalutionRecord",
                    query: {
                      queryParams: this.listQueryParams,
                      time: undefined
                    },
                  });
                }
              })
              .finally(() => {
                this.$modal.closeLoading();
              });
          } else {
            this.formData.refId = this.$route.query.id;
            this.formData.level = parseInt(this.$route.query.level) + 1;
            addGroping(this.formData)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
              })
              .finally(() => {
                // this.buttonLoading = false;
                this.$refs.vForm.resetFields(); // 重置表单数据
                this.$router.push(
                  "/review/localEvaluation/projectEvalutionList"
                );
                this.reset();
              });
          }
        }
      });
    },
    reset() {
      this.formData = {
        id: undefined,
        refId: undefined,
        reviewEvents: undefined,
        evaluationElements: undefined,
        examinerCode: undefined,
        examiner: undefined,
        isApply: undefined,
        lookWorkCase: undefined,
        evaluateCase: undefined,
        isInnovate: undefined,
        evaluateObject: undefined,
        backingMaterial: "",
        lookPapersCase: undefined,
        deduct: undefined,
        isProblem: undefined,
        problem: undefined,
        isGreatProblem: undefined,
        rectifySuggest: undefined,
        scenePhoto: undefined,
        reviewStatus: "未评审",
        reviewStandard: undefined,
        scoreStandard: undefined,
        isDelete: undefined,
        evaGroupId: undefined,
        deductPursuant:undefined,
        handleQuery:undefined
      };
    },
    submitForm() {},
    queryDept(){
      //name 用于之后或许业务更改时用  备用
      let name = this.$store.state.user.name;
      queryDept(name).then((row) =>{
        this.deptsOptions = [];
        row.forEach((item) => {
          this.deptsOptions.push({
            "label" : item.deptName,
            "value" : item.deptName
          })
        })
      })
    },
    resetForm() {
      this.$refs["vForm"].resetFields();
    },
    // 判断是不是安全性评价 如果是那就会先评审标准和评分标准
    isSafeEva(value) {
      if (undefined != value){
        //根据事件的id查看他的事件类型
        isSafeEva(value)
          .then((res) => {
            this.$set(this.formData, 'handleQuery', res.handleQuery);
            this.formData.scoreStandard = res.scoreStandard;
          });
      }
    },
    isProblemChange(value){
      // 在这里执行与显示和隐藏相关的操作
      if (value == 1){
        // this.formData.rectifySuggestHidden = false;
        this.gist = true;
      }else {
        // this.formData.rectifySuggestHidden = true;
        this.gist = false;
      }
    },
    //文件上传
    handleBeforeUpload(file) {
      // 校检文件类型
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
      }
      this.$modal.loading("正在上传文件，请稍候...");
      this.number++;
      return true;
    },
    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传文件数量不能超过3个!`);
    },
    // 上传失败
    handleUploadError(err) {
      this.$modal.msgError("上传文件失败，请重试");
      this.$modal.closeLoading();
    },
    handlePictureCardPreview(file){
      console.log('file')
      this.dialogVisible =true
      console.log(file)
    },
    handleDownload(d){
    },
    handleRemove(s){
    },
    // 上传成功回调
    handleUploadSuccess(res, file) {
      if (res.code === 200) {
        this.uploadList.push({ name: res.data.oldFileName, url: res.data.fileUrl, fileId : res.data.id});
        this.formData.backingMaterial += res.data.id+",";
        this.uploadedSuccessfully();
      } else {
        this.number--;
        this.$modal.closeLoading();
        this.$modal.msgError(res.msg);
        this.$refs.fileUpload.handleRemove(file);
        this.uploadedSuccessfully();
      }
    },
    // 删除文件
    handleDelete(index) {
      let ossId = this.fileList[index].ossId;
      delOss(ossId);
      this.fileList.splice(index, 1);
      this.$emit("input", this.listToString(this.fileList));
    },
    // 上传结束处理
    uploadedSuccessfully() {
      if (this.number > 0 && this.uploadList.length === this.number) {
        this.fileList = this.fileList.concat(this.uploadList);
        this.uploadList = [];
        this.number = 0;
        this.$emit("input", this.listToString(this.fileList));
        this.$modal.closeLoading();
      }
    },
    // 获取文件名称
    getFileName(name) {
      // 如果是url那么取最后的名字 如果不是直接返回
      if (name.lastIndexOf("/") > -1) {
        return name.slice(name.lastIndexOf("/") + 1);
      } else {
        return name;
      }
    },
    // 对象转成指定字符串分隔
    listToString(list, separator) {
      let strs = "";
      separator = separator || ",";
      for (let i in list) {
        strs += list[i].ossId + separator;
      }
      return strs != "" ? strs.substr(0, strs.length - 1) : "";
    },
    // 移除文件
    removeFile(index,file) {
      // 从 fileList 数组中移除文件
      this.fileList.splice(index, 1);
      if (undefined != file.fileId){
        delFileInfo(file.fileId)
      }
      // 还可以在这里进行删除服务器上对应文件的操作，具体操作取决于您的后端实现
    },
  },
};
</script>

<style lang="scss" scoped>
.el_col {
  display: flex;
  justify-content: space-evenly;
  align-content: center;
}
.card-container {
  height: 80%; /* 设置容器的高度为 100% */
  display: flex;
  flex-direction: column;
}
.card-item {
  flex: 1; /* 平分容器的宽度 */
}
#FormDialog {
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.dialog-footer1 {
  width: 100%;
  height: 6vh;
  background: #ffffff;
  text-align: center;
  line-height: 6vh;
}
.el-card {
  margin-top: 10px;
}
.el-select {
  width: 100%;
}
.el-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.el-form-item {
  width: 30%;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.el-form-item {
  margin-bottom: 11px;
}
.el-table {
  min-height: 50% !important;
}
.always_handerOne {
  height: 80px;
  background-color: #ffffff;
  //border-radius: 14px;
}
.always_handerOne1 {
  height: auto;
  background-color: #ffffff;
  //border-radius: 14px;
  padding: 20px;
}
.always_title {
  font-size: 20px;
  font-weight: bold;
  line-height: 53px;
  margin-left: 30px;
}
.always_title1 {
  font-size: 18px;
  font-weight: bold;
  // line-height: 53px;
  margin-left: 15px;
  position: relative;
}
.always_title1 ::before {
  content: "|";
  flex-shrink: 0;
  width: 4px;
  height: 6%;
  margin-left: 12px;
  // background: #f90;
  color: #f90;
  position: absolute;
  left: -22px;
  margin-bottom: 12px;
}
.always_hander {
  background: url(../../../assets/images/header0.png);
  height: 20px;
  width: 100%;
}
.margin_col {
  margin-bottom: 20px;
}
.el_formContent .el-form-item {
  width: 50%;
}
.imageList{
  display: flex;
}
.demonstration{
  text-align: center;
}
.sel-width{
  width: 90%;
}
.el-header{
  padding: 0px 0px;
}
.el-radio-group{
  display: flex;
  line-height: 1;
  vertical-align: middle;
  font-size: 0;

}
.styleCentre{
  line-height: 2.5;
}
.style-Change{
  padding: 0px 0px;
  background:#ffffff;
}
.el-slider__bar{
  height: 6px;
  background-color: red !important;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  position: absolute;
}
.el-tooltip el-slider__button{
  border: solid 2px #49ff7d;
}
</style>
<style scoped>
/deep/ .el-upload{
  width: 100px;
  height: 100px;
  line-height: 100px;
}
/deep/ .el-upload .el-upload-dragger{
  width: 100px;
  height: 100px;
  line-height: 100px;
}
/deep/ .el-upload-list--picture-card .el-upload-list__item{
  width: 100px;
  height: 100px;
  line-height: 100px;
}
/deep/ .upload-file-uploader{
  width: 400%;
}
</style>
